<template>
  <div>
    <first-loan-validate v-if="isUploaded" @clearData="isUploaded = false"></first-loan-validate>
    <template v-else>
      <el-upload
        class="upload"
        drag
        :action="actionUrl"
        :multiple="false"
        :show-file-list="false"
        accept=".xls, .xlsx"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadFail"
        :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将商业银行报送的首贷户文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
    </template>
  </div>
</template>
<script>
import FirstLoanValidate from "./components/FirstLoanValidate";
import { Upload, Button, Input } from "element-ui";
import { checkUploaded, downloadResult } from "@/api/first-loan.js";
export default {
  name: "first-loan-manage",
  components: {
    FirstLoanValidate,
    [Upload.name]: Upload,
    [Button.name]: Button,
    [Input.name]: Input
  },
  data() {
    return {
      actionUrl: process.env.BASE_URL + "/first-loan/upload.do",
      isUploaded: false,
      loadingInstance: null
    };
  },
  mounted() {
    checkUploaded()
      .then(res => {
        this.isUploaded = res.uploaded;
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  },
  methods: {
    beforeUpload(file) {
      this.loadingInstance = this.$loading({
        fullscreen: true,
        text: "正在分析首贷户数据"
      });
    },
    fileUploadSuccess(response, file, fileList) {
      this.loadingInstance.close();
      let { status, msg } = response;
      if (status === 0) {
        this.isUploaded = true;
        return;
      }
      this.$alert(msg);
    },
    fileUploadFail(err, file, fileList) {
      this.loadingInstance.close();
      this.$alert(err);
    }
  }
};
</script>
<style lang="stylus" scoped>
>>>.el-upload {
  width: 100%;

  .el-upload-dragger {
    width: 100%;
  }
}

.btn-row {
  .el-input {
    margin-left: 5px;
    width: 400px;
  }
}
</style>